.publish-navbar {
  .am-navbar {
    background-color: #f4f4f4;
  }
}

.publish-content {
  height: calc(100vh - 95px);
  overflow-y: auto;
  font: 14px '雅黑';

  .am-list {
    .title {
      flex: 0;
      font: 16px '雅黑';
      color: #21b97a;
    }

    .am-list-header {
      padding: 10px;
      border-bottom: 1px solid #ddd;
    }

    .am-list-item {
      padding: 0 5px;
      border: none;

      .am-list-line {
        padding: 0;
        flex-wrap: wrap;

        &::after {
          height: 0;
        }
      }

      .am-list-content,
      .house-title .am-list-content {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0;

        &>span {
          font: 14px '雅黑';
          color: #333;
          width: 20vw;
          text-align: justify;
          text-align-last: justify;
          letter-spacing: 2px;
          margin: 0;
          padding-left: 5px;
          flex-shrink: 0;
        }

        .am-list-item {
          width: 80vw;
          flex-shrink: 1;
        }

        div.content {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          flex-wrap: wrap;
        }

        input {
          font: 14px '雅黑';
        }

        &.am-list-content.house-title {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
        }
      }

      .other {
        color: #666;
        font: 14px '雅黑';
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;

        i {
          font-size: 12px;
          margin-left: 10px;
          color: #999;
        }

      }

      .house-title {
        padding: 10px 0 0;
        flex-wrap: wrap;
        flex-shrink: 0;
        display: block;

        span {
          padding-bottom: 10px;
        }

        .content {
          width: 100%;
          flex-wrap: wrap;

          .am-list-item {
            width: 100%;

            .am-list-line {

              &::after {
                height: 0;
              }
            }
          }

          .icon-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            width: 20%;
            padding: 0;
            color: #333;
            font-size: 14px;

            i {
              font-size: 20px;
            }

            span {
              display: flex;
              justify-content: center;
              align-items: center;
            }

            &.active {
              color: #21b97a;

              span {
                color: #21b97a;
              }
            }

          }

          textarea {
            font: 14px '雅黑';
          }

          .am-image-picker {
            width: 100%;
          }

        }
      }

    }

  }

}

.publish-footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #ddd;

  div {
    font: 18px '雅黑';
    letter-spacing: 2px;
    background-color: #fff;
    width: 50%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:first-child {
      color: #21b97a;
    }

    &:last-child {
      background-color: #21b97a;
      color: #fff;
    }

  }

}

.image-wall{
  width: 100vw;
  padding: 5px 0 10px;
  display: flex;
  flex-wrap:wrap ;
  justify-content: flex-start;
  align-items: center;

  .img-item{
    position: relative;
    width: 23%;
    height: 25vw;
    margin: 0 2% 2vw 0;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    img{
      width: 100%;
      height: 25vw;
    }
    .img-del-btn{
      position: absolute;
      top: 5px;
      right: 5px;
      z-index: 20;
      width: 18px;
      height: 18px;
    }
  }
  .img-item.add{
    input{
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 50;
    }
    i{
      position: absolute;
      display: block;
      font-size: 10vw;
      font-weight: 100;
      color: #e6e6e6;
    }
    
  }
}